import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import home from './modules/home'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 状态（共享数据）
    // 访问(vue)：this.$store.state.num
    // 访问(js)：import store from '@/store'   store.state.num
    num: 0
  },
  getters: {
    // 作用：实际就是vuex的计算属性
    // 计算属性：
    // 计算属性使用场景：依赖一个或者多个值产生一个新的值
    // 计算属性的特点：它产生的新值会缓存起来，依赖的值变化了，它会实时变化
    // getters依赖state的值产生一个新的值
    // 访问(vue)：this.$store.getters.getNum
    // 访问(js): import store from '@/store'  store.getters.getNum
    getNum (state) {
      return state.num * 2
    }
  },
  mutations: {
    // 修改state的唯一途径
    // 访问vue（调用mutations方法）:this.$store.commit('SETNUM',实参)
    // 访问js（调用mutations方法）:import store from '@/store'  store.commit('SETNUM',实参)
    SETNUM (state, value) {
      state.num = value
    }
  },
  actions: {
    // 作用：用于vuex内的异步处理，它要修改state还得通过mutations
    // 访问vue： this.$store.dispatch('refreshNum',实参)
    // 访问js：import store from '@/store'   store.dispatch('refreshNum',实参)
    // actions的返回值是什么？它的返回值是promise
    refreshNum (ctx, value) {
      // ctx:{commit}
      setTimeout(() => {
        ctx.commit('SETNUM', value)
      }, 2000)
    }
  },
  modules: {
    // 为什么要模块化？
    // 利于维护，层次清晰 ，利于利用，利于多人协作.....
    // 网站都是分模块的:user,home,setting...
    // 二问题
    // 1：代码都放到index.js太多较乱
    // 将相应的模块封装抽离出去
    //  1:store/modules/模块名.js  export default {state,mutation。。。}
    //  2：store/index.js导入模块  impot 模块名 from './modules/模块名.js'  modules:{模块名}
    // 2：命名可能冲突
    // 配制namespaced解决，相当于加上命名空间
    user,
    home
  }
})
